<template>
  <div id="app">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>航次列表</span>
              <el-select
                  v-model="FindFlightDTO.departureCityCode"
                  filterable
                  placeholder="出发城市"
              >
                <el-option
                    v-for="item in cities"
                    :key="item.cityCode"
                    :label="item.cityName"
                    :value="item.cityCode">
                </el-option>
              </el-select>
              <el-select
                  v-model="FindFlightDTO.arrivalCityCode"
                  filterable
                  placeholder="到达城市"
              >
                <el-option
                    v-for="item in cities"
                    :key="item.cityCode"
                    :label="item.cityName"
                    :value="item.cityCode">
                </el-option>
              </el-select>
              <el-date-picker
                  v-model="FindFlightDTO.startDate"
                  type="date"
                  placeholder="出发日期"
              />
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button type="primary" @click="handleAddFlight">添加航班</el-button>
            </div>
          </template>
          <el-table :data="flights" border style="width: 100%">
            <el-table-column prop="flightNumber" label="航班名称">
            </el-table-column>
            <el-table-column prop="companyName" label="航空公司名称">
            </el-table-column>
            <el-table-column prop="webDepartureTime" label="出发时间">
            </el-table-column>
            <el-table-column prop="webArrivalTime" label="到达时间">
            </el-table-column>
            <el-table-column prop="airline" label="飞行航线">
            </el-table-column>
            <el-table-column prop="status" label="航班状态">
            </el-table-column>
            <el-table-column prop="webFrequency" label="频率">
            </el-table-column>
            <el-table-column prop="plane1" label="执行飞机">
            </el-table-column>
            <el-table-column label="舱段名称">
              <template #default="scope">
                <div v-for="cabin in scope.row.cabinPrices" :key="cabin.id">
                  {{ cabin.cabinName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="舱段类型">
              <template #default="scope">
                <div v-for="cabin in scope.row.cabinPrices" :key="cabin.id">
                  {{ cabin.cabinType }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="舱段价格">
              <template #default="scope">
                <div v-for="cabin in scope.row.cabinPrices" :key="cabin.id">
                  {{ cabin.price }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button type="primary" size="small" @click="handleEditFlight(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDeleteFlight(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog v-model="dialogVisible" title="添加航班" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="航班名称">
          <el-input v-model="form.flightNumber" />
        </el-form-item>
        <el-form-item label="航空公司名称">
          <el-input v-model="form.companyName" />
        </el-form-item>
        <el-form-item label="出发时间">
          <div class="block">
            <el-date-picker
                v-model="form.departureTime"
                type="datetime"
                placeholder="选择日期时间"
            />
          </div>
        </el-form-item>
        <el-form-item label="到达时间">
          <div class="block">
            <el-date-picker
                v-model="form.arrivalTime"
                type="datetime"
                placeholder="选择日期时间"
            />
          </div>
        </el-form-item>
        <el-form-item label="飞行航线">
          <el-select v-model="form.airline" placeholder="请选择航线">
            <el-option
                v-for="airline in airlines"
                :key="airline.airlineNumber"
                :label="airline.airlineNumber"
                :value="airline.airlineNumber"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="飞行频率">
          <el-select v-model="form.frequency" placeholder="请选择频率">
            <el-option
                v-for="frequency in frequencies"
                :key="frequency.value"
                :label="frequency.label"
                :value="frequency.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="执行飞机">

          <el-select v-model="form.plane" placeholder="请选择飞机" @change="handlePlaneChange">
            <el-option
                v-for="plane in planes"
                :key="plane.id"
                :label="plane.id+'-'+plane.name"
                :value="plane.id"
            />
          </el-select>
        </el-form-item>
        <div style="margin-top:20px" v-for="cabin in selectPlanCabins" :key="cabin.id">
          <span>{{ getPlanCabinName(cabin) }}</span>
          <br>
          <el-input v-model="cabin.price" placeholder="请输入价格" type="number"></el-input>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveFlight">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  name: 'AdminFlight',
  data() {
    return {
      airlines: [],
      planes: [],
      flights: [],
      cities: [],
      selectPlanCabins: [],
      frequencies:[
        {
          label: '每天',
          value: '1'
        },
        {
          label: '隔天',
          value: '2'
        },
        {
          label: '每周',
          value: '3'
        },
        {
          label: '每月',
          value: '4'
        },
      ],
      dialogVisible: false,
      form: {
        flightNumber: '',
        companyName: '',
        departureTime:'',
        arrivalTime:'',
        airline: '',
        frequency: '',
        plane: '',
      },
      FindFlightDTO: {
        departureCityCode: '',
        arrivalCityCode: '',
        startDate: '',
      },
    };
  },
  mounted() {
    this.fetchAirlines();
    this.fetchPlanes();
    this.fetchFlights();
    this.fetchCities();
  },
  methods: {
    handleSearch(){
      if(this.FindFlightDTO.departureCityCode === '' || this.FindFlightDTO.arrivalCityCode === '' || this.FindFlightDTO.startDate === ''){
        ElMessage.error('请输入完整的查询条件');
        return;
      }
      axios.post('airline/flights', this.FindFlightDTO)
          .then(response => {
            this.flights = response.data;
          })
          .catch(error => {
            console.error('搜索航班失败', error);
            ElMessage.error('搜索航班失败');
            this.flights = [];
          });
    },
    getPlanCabinName(cabin) {
      return cabin.name;
    },
    fetchCities() {
      axios.get('/cities')
          .then(response => {
            this.cities = response.data;
          })
          .catch(error => {
            console.error('获取城市列表失败', error);
            ElMessage.error('获取城市列表失败');
          });
    },
    fetchFlights(){
      axios.get('/flight')
          .then(response => {
            this.flights = response.data;
          })
          .catch(error => {
            console.error('获取航班列表失败', error);
            ElMessage.error('获取航班列表失败');
          });
    },
    fetchAirlines() {
      axios.get('/airline')
          .then(response => {
            this.airlines = response.data;
          })
          .catch(error => {
            console.error('获取航空公司列表失败', error);
            ElMessage.error('获取航空公司列表失败');
          });
    },
    fetchPlanes() {
      axios.get('/planes')
          .then(response => {
            this.planes = response.data;
          })
          .catch(error => {
            console.error('获取飞机列表失败', error);
            ElMessage.error('获取飞机列表失败');
          });
    },
    handlePlaneChange(){
      let planeId = this.form.plane;
      let plane = this.planes.find(plane => plane.id === planeId);
      this.selectPlanCabins = [];
      let i=0;
      for(i;i<plane.cabins.length;i++){
        this.selectPlanCabins.push(
            {
                id: plane.cabins[i].id,
                name: plane.cabins[i].name,
                type: plane.cabins[i].type,
                price: 0,
            }
        );
      }
      console.log(this.selectPlanCabins);
    },
    handleAddFlight() {
      this.dialogVisible = true;
      this.form = {
        cityName: '',
        provinceCode: null,
      };
    },
    handleSaveFlight() {
      const FlightDto = {
        flightNumber: this.form.flightNumber,
        companyName: this.form.companyName,
        departureTime: this.form.departureTime,
        arrivalTime: this.form.arrivalTime,
        airline: this.form.airline,
        frequency: this.form.frequency,
        plane: this.form.plane,
        cabinPrices: this.selectPlanCabins,
      };
      axios.post('/flight', FlightDto)
          .then(() => {
            this.dialogVisible = false;
            this.fetchFlights();
            ElMessage.success('添加航班成功');
          })
          .catch(error => {
            console.error('添加航班失败', error);
            ElMessage.error('添加航班失败');
          });
    },
    // handleEditFlight(flight) {
    //   // TODO: 实现编辑航班功能
    //   console.log('编辑航班', flight);
    // },
    // handleDeleteFlight(flight) {
    //   // TODO: 实现删除城市功能
    //   console.log('删除城市', flight);
    // },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.box-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
